<template>
    <el-select class="g-width100"
               ref="elSelect"
               filterable
               :disabled="disabled"
               :readonly="readonly"
            v-model="localValue"
               :placeholder="placeholder"
            v-on:focus="handleFocus($event)"
            v-on:blur="handleBlur($event)"
            v-on:change="emitChange"
            v-on:input="emitInput"
    >
        <el-option label="请选择" :value="empty" v-if="showEmpty"></el-option>
        <template  v-if="data && data.length > 0">
            <el-option
                    v-for="(item,index) in data"
                    :label="$_object_getValue(item,optionProp.label)"
                    :disabled="item.isDisabled || false"
                    :value="$_object_getValue(item,optionProp.value)"
                    :key="index"
            ></el-option>
        </template>

        <template v-if="groupData && groupData.length > 0">
            <el-option-group
                    v-for="(groupItem,groupItemIndex) in groupData"
                    :key="groupItemIndex"
                    :label="$_object_getValue(groupItem,groupProp.label)">
                <el-option
                        v-for="(item,index) in $_object_getValue(groupItem,groupProp.items)"
                        :label="$_object_getValue(item,optionProp.label)"
                        :disabled="item.isDisabled || false"
                        :value="$_object_getValue(item,optionProp.value)"
                        :key="index"
                ></el-option>
            </el-option-group>
        </template>
    </el-select>
</template>

<script>
    import objectMixin from "../../mixin/ObjectMixin"
    export default {
        name: 'Select',
        mixins:[objectMixin],
        props: {
            value: {
                required: true
            },
            placeholder:{
                type: String,
                default: '请选择'
            },
            // 是否显示请选择
            showEmpty: {
                type: Boolean,
                default: true
            },
            // 数据
            data: {
                type: Array
            },
            // 数据地址
            groupData: {
                type: Array
            },
            // 是否禁用
            disabled:{
                type:Boolean,
                default:false
            },
            readonly:{
                type:Boolean,
                default:false
            },
            optionProp:{
                type: Object,
                default:function () {
                    return {
                        value: 'id',
                        label: 'name'
                    }
                }
            },
            groupProp:{
                type: Object,
                default:function () {
                    return {
                        items: 'items',
                        label: 'name'
                    }
                }
            }
        },
        data () {
            return {
                localValue: this.value,
                empty: null,
            }
        },
        mounted () {
        },
        methods: {
            handleFocus (event) {
                this.$emit('focus', event)
            },
            handleBlur (event) {
                this.$emit('blur', event)
            },
            emitChange (val) {
                this.$emit('change', val)
                this.$emit('selectData', this.getSelectData(val))
            },
            emitInput (val) {
                this.$emit('input', val)
                this.$emit('selectData', this.getSelectData(val))

            },
            getSelectData(val){
                if(!this.data){
                    return null
                }
                for (let i = 0; i < this.data.length; i++) {
                    if (val == this.$_object_getValue(this.data[i], this.optionProp.value)) {
                        return this.data[i]
                    }
                }
            }
        },
        watch: {
            value(val){
                this.localValue = val
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
